<template>
  <div class="container" :class="listData.length===0 ? 'bg-white' : ''">
    <div class="tig">点击右侧按钮，查看您设置后的效果~ <div class="check" @click="$pt.reLaunch({ url: '/pages/home/main' })">查看效果</div>
    </div>
    <!-- 已推荐 未推荐 筛选 -->
    <div class="recomment-tabs-box height-44">
      <div>
        <recomment-tabs @switchTabs="switchTabs" :activeIndex="curStatusIndex" ref="recommentTbs"></recomment-tabs>
      </div>
      <div @click="fliterMenu" style="border:1px solid #f9f9f9">
        <span>筛选</span>
        <img v-if="fileSpace" :src="fileSpace+'/images/goods-list-filter.png'" alt="">
      </div>
    </div>
    <!-- <div :style="'height: ' + height + 'px;'"></div>
    <div :style="'margin-top: ' + (height+4) + 'px;'"> -->
    <div class="height-80"></div>
    <div>
      <div :class="showBox ? 'noscroll' : ''" :style="'height: calc(100vh - ' + height + 'px)'">
        <!-- 商品列表区域 -->
        <div v-for="(item, index) in listData" :key="index" class="flex v-align-c item">
          <div class="flex-item flex-row" @click="$pt.navigateTo({url:'/pages/shop/detail/main?goodsId='+item.goodsId + '&goodsType=' + item.goodsType})">
            <div>
              <img :src="item.imageUrl" alt="" mode="aspectFill" class="img-item mar-5 border-radius-5" />
            </div>
            <div class="flex-col mar-l-5 right-content-area pad-t-5 pad-b-5">
              <div class='item-title line-2'>{{ item.title }}</div>
              <div class="price-area">
                <div v-if="categoryType===1" class='font-red'>¥{{ item.price }}</div>
                <div v-if="categoryType===2" class='font-red'>¥{{ item.sellPrice }}</div>
                <div>
                  <button v-if="item.showHomePage===0" @click.stop="saveShowHomePage(item.goodsId, index, 1, item.goodsType)" class="mini-btn">设置推荐</button>
                  <button v-if="item.showHomePage===1" @click.stop="saveShowHomePage(item.goodsId, index, 0, item.goodsType)" class="mini-btn cancel">取消推荐</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 下拉没有更多数据了 -->
        <div class="no-more-data pad-t-20 pad-b-20" v-if="noMoreData">
          <span>---没有更多的数据---</span>
        </div>
        <!-- 没有该类型数据 -->
        <div class="nodata" v-if="listData.length===0">
          <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
          <div class="align-c mar-t-5 font-16 font-color-6">您还没有商品哟~</div>
          <div v-if="checkOwner && getVeekrayStatus === 1" class="goSetting">
            <!-- <button @click="$pt.navigateTo({url:'/pages/shop/edit/main'})">前往设置</button> -->
            <button @click="goSetting">前往设置</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- <div class="pad-30"></div> -->
    <!-- 筛选 -->
    <div>
      <sort-menu ref="showBox" :background="globalStyle.color2" @sureOperate="getFilterGoods" @close="close"></sort-menu>
    </div>
  </div>
</template>

<script>
import SortMenu from '../components/SortMenu.vue'
import RecommentTabs from '../components/RecommentTabs.vue'
import { pageRecommendGoods } from '@/api/distribution'

import {
  saveGoodsInHomeByMemberId
} from '@/api/home'

export default {
  components: { SortMenu, RecommentTabs },
  data() {
    return {
      listData: [],
      categoryIndex: null,
      categoryData: [],
      showHomePageGoods: [],
      categoryType: 1,
      currentPage: 1, // 商品列表当前页数
      curStatusIndex: 0, // 当前状态 0：未推荐 1：已推荐
      noSelectSort: false, // 判断是否有至少选中一个分类
      noSelectType: false, // 判断是否至少选中一个类型
      globalStyle: {}, // 保存缓存中的全局样式信息
      curTabsIndex: 0, // 默认显示已推荐的商品列表
      pullFresh: false, // 判断是通过下拉触底加载商品列表还是通过切换tab加载商品列表
      goodsType: '', // 商品类型 10: 自营商品  30: 企业商品
      listQuery: {
        goodsType: '', // 商品类型 10: 自营商品  30: 企业商品
        showHomePage: 0, // 默认显示未推荐的商品列表
        currentPage: 1
      },
      isFilterData: false, // 判断当前数据列表是否是通过筛选菜单 进行展示的
      noMoreData: false, // 判断下拉是否还有更多数据
      showBox: false, // 判断筛选栏是否出现
      height: 0
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.initRecommendGoods()
  },
  onShow() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = getAppInfo.style
    // let query = wx.createSelectorQuery()
    // let height = 0
    // query.select('.recomment-tabs-box').boundingClientRect()
    // query.exec((res) => {
    //   height = res[0].height // 获取list高度
    // })
    // this.height = height + 37 + 'px'
  },
  onReachBottom() {
    this.pullFresh = true
    if (!this.noMoreData) {
      this.initRecommendGoods()
    }
  },
  methods: {
    // 点击"前往设置"按钮 （当已推荐列表的数据为空时）
    goSetting() {
      // 判断未推荐列表是否为空
      this.listQuery.showHomePage = 0
      this.listQuery.currentPage = 1
      pageRecommendGoods(this.listQuery).then(response => {
        if (response.data.records.length > 0) {
          this.$refs.recommentTbs.refSwitchTabs(0)
          this.switchTabs(0)
        } else {
          this.$pt.navigateTo({url: '/pages/shop/edit/main'})
        }
      }).catch(err => {
        console.loh(err)
      })
    },
    // 显示右侧滑入分类菜单
    fliterMenu() {
      this.showBox = true
      this.$refs.showBox.showBox()
    },
    close(item) {
      this.showBox = item
    },
    // 切换tab(已推荐 未推荐)
    switchTabs(index) {
      this.pullFresh = false
      this.curTabsIndex = index
      if (!this.isFilterData) {
        this.listQuery.showHomePage = index
      } else {
        this.categoryData = []
        this.listQuery = {
          goodsType: '',
          showHomePage: index,
          currentPage: 1
        }
      }
      this.initRecommendGoods()
      this.isFilterData = false
    },
    // 初始化商品推荐列表
    initRecommendGoods() {
      this.$utils.showToast({
        title: '数据加载中',
        icon: 'loading'
      })
      if (!this.pullFresh) {
        this.listQuery.currentPage = 1
        this.categoryData = []
        this.getRecommendGoods()
      } else {
        this.listQuery.currentPage++
        this.getRecommendGoods()
      }
    },
    // 调用接口获取商品推荐列表
    getRecommendGoods() {
      this.listQuery.memberId = this.getMemberId
      pageRecommendGoods(this.listQuery).then(response => {
        if (response.isError) return
        this.$pt.hideToast()
        this.noMoreData = response.data.records.length < response.data.size
        if (!this.pullFresh) {
          this.categoryData[this.curTabsIndex] = []
        }
        response.data.records.forEach(item => {
          // 处理字段长度
          item.title = this.$utils.getStrByLength(item.title, 32)
          this.categoryData[this.curTabsIndex].push(item)
        })
        this.listData = this.categoryData[this.curTabsIndex]
        this.pullFresh = false
      }).catch(err => {
        console.log(err)
      })
    },
    // 通过筛选 进行商品列表展示
    getFilterGoods(data) {
      this.listData = []
      this.categoryData = []
      this.$refs.recommentTbs.refSwitchTabs(data.showHomePage)
      this.listQuery = JSON.parse(JSON.stringify(data))
      this.isFilterData = true
      this.pullFresh = false
      this.getRecommendGoods()
    },
    // 点击设置推荐按钮/取消推荐按钮
    saveShowHomePage(goodsId, goodsIndex, showHomePage, goodsType) {
      const that = this
      saveGoodsInHomeByMemberId({
        memberId: this.getCustomerId,
        goodsId: goodsId,
        showHomePage: showHomePage,
        goodsType: goodsType
      }).then((response) => {
        if (response.isError) return
        if (response.data === false) {
          that.$utils.showToast({ title: '最多只能设置8个' })
          return
        }
        that.$utils.showToast({ title: '操作成功' })
        const oldShowHomePageGoods = this.showHomePageGoods
        // 需要清除值才能双向绑定
        this.showHomePageGoods = []
        this.showHomePageGoods = oldShowHomePageGoods
        this.showHomePageGoods[goodsIndex] = showHomePage
        this.setMethodInitData('pages/home/main', 'getListUserGoods')
        showHomePage === 1 ? this.switchTabs(0) : this.switchTabs(1)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 在右侧滑入菜单中 切换状态
    changeStatus(index) {
      this.curStatusIndex = index
    },
    // 在右侧滑入菜单中 切换类型
    changeType(item) {
      item.active = !item.active
    }
  }
}
</script>

<style lang="less" scoped>
.bg-white {
  min-height: 100vh;
  background: white;
}
.nodata {
  margin-top: 40px;
  .goSetting {
    margin-top: 60px;
    button {
      width: 133px;
      height: 33px;
      background: #333333;
      line-height: 33px;
      padding: 0;
      color: white;
      font-size: 15px;
    }
  }
}
.tig {
  padding-left: 20px;
  padding-right: 8px;
  height: 38px;
  background: #f5f5f5;
  color: #666666;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
  box-sizing: border-box;
  .check {
    width: 140rpx;
    height: 44rpx;
    font-size: 24rpx;
    color: #343434;
    background: #ffe200;
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .uncheck {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #fdfdfd;
    background: #cccccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.item {
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.item image {
  width: 224rpx;
  height: 224rpx;
}
.right-content-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  .item-title {
    height: 55px;
    line-height: 25px;
  }
  .price-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 140rpx;
      height: 44rpx;
      line-height: 44rpx;
      color: #343434;
      background: #ffd800;
      padding: 0;
    }
  }
}

.cancel {
  background-color: #efeff4;
}
.filter-main-box {
  .layout-box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }
  .filter-area {
    width: 600rpx;
    height: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 21;
    .filter-input-box {
      input {
        width: 542rpx;
        background: #f5f5f5;
        border-radius: 32rpx;
        margin: 0 auto;
        height: 64rpx;
        text-align: center;
      }
    }
    .filter-menu-box {
      h5 {
        font-size: 30rpx;
        color: #343434;
        font-weight: 700;
        span {
          font-size: 24rpx;
          color: #f00;
          margin-left: 10rpx;
          font-weight: 600;
        }
      }
      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        font-size: 24rpx;
        li {
          width: 152rpx;
          height: 64rpx;
          background: #f5f5f5;
          border: 1px solid #ffe200;
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          margin-top: 20rpx;
          border: 1px solid #fff;
        }
        .active-menu {
          background: #fffbd8;
          border: 1px solid #ffe200;
          border-radius: 32px;
        }
      }
    }
    .btn-group {
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #343434;
        font-weight: 700;
      }
      .resetBtn {
        width: 215rpx;
        height: 88rpx;
        background: #f5f5f5;
        border-radius: 44rpx;
      }
      .sureBtn {
        width: 307rpx;
        height: 88rpx;
        background: #ffe100;
        border-radius: 44rpx;
      }
    }
  }
}

.recomment-tabs-box {
  position: fixed;
  top: 37px;
  width: 100%;
  left: 0;
  z-index: 99;

  display: flex;
  & > div:nth-child(1) {
    flex: 1;
  }
  & > div:nth-child(2) {
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    span {
      color: #666666;
      font-size: 28rpx;
    }
    img {
      width: 24rpx;
      height: 23rpx;
    }
  }
}

.no-more-data {
  text-align: center;
  color: #cccccc;
  font-size: 24rpx;
}
.noscroll{
  overflow: hidden;
  // height: calc(100vh - 79px);
}
</style>
